<template>
    <div class="common-layout">
        <el-container>
            <!-- <el-header>Header</el-header> -->
            <el-container>
                <el-aside width="200px">
                    <el-row class="tac">
                        <el-col :span="24">
                            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
                                @close="handleClose">
                                <!-- <el-sub-menu index="1">
                                    <template #title>
                                        <el-icon>
                                            <location />
                                        </el-icon>
                                        <span>Navigator One</span>
                                    </template>
                                    <el-menu-item-group title="Group One">
                                        <el-menu-item index="1-1">item one</el-menu-item>
                                        <el-menu-item index="1-2">item two</el-menu-item>
                                    </el-menu-item-group>
                                    <el-menu-item-group title="Group Two">
                                        <el-menu-item index="1-3">item three</el-menu-item>
                                    </el-menu-item-group>
                                    <el-sub-menu index="1-4">
                                        <template #title>item four</template>
                                        <el-menu-item index="1-4-1">item one</el-menu-item>
                                    </el-sub-menu>
                                </el-sub-menu> -->
                                <el-menu-item index="1" @click="open('/num')">
                                    <el-icon><icon-menu /></el-icon>
                                    <span>数字滚动</span>
                                </el-menu-item>
                                <el-menu-item index="2" @click="open('/home')">
                                    <el-icon><icon-menu /></el-icon>
                                    <span>网页打字机</span>
                                </el-menu-item>
                                <el-menu-item index="3" @click="open('/gsap')">
                                    <el-icon>
                                        <document />
                                    </el-icon>
                                    <span>gsap</span>
                                </el-menu-item>
                                <el-menu-item index="4" @click="open('')">
                                    <el-icon>
                                        <setting />
                                    </el-icon>
                                    <span>Navigator Four</span>
                                </el-menu-item>
                            </el-menu>
                        </el-col>
                    </el-row>

                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        },
        open(url) {
            this.$router.push({
                path: url
            })
        },
    }
}
</script>
  
<style lang="scss">
.common-layout {
    width: 100vw;
    height: 100vh;
}
</style>
  